<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}}</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1100px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06);
            text-align: center;
        }
        .stat-number {
            font-size: 2.4em;
            font-weight: bold;
            color: #007bff;
        }
        .stat-label {
            color: #6c757d;
            margin-top: 5px;
        }
        .charts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .chart-card {
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06);
            height: 260px;
        }
        .chart-title {
            margin: 0 0 10px;
            font-size: 1.1em;
            color: #343a40;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
            color: #868e96;
            font-size: 0.9em;
        }
        .back-link {
            display: inline-block;
            margin-top: 10px;
            color: #007bff;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
        .chart-container {
            width: 100%;
            height: 200px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>{{.Title}}</h1>
        <p>总览当前用户数与分享文档情况</p>
    </div>

    <div class="stats">
        <div class="stat-card">
            <div class="stat-number">{{.UserCount}}</div>
            <div class="stat-label">当前用户数</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{.DocumentCount}}</div>
            <div class="stat-label">当前分享文档数</div>
        </div>
    </div>

    <div class="charts">
        <div class="chart-card">
            <h2 class="chart-title">每日新增用户数</h2>
            <div id="userChart" class="chart-container"></div>
        </div>
        <div class="chart-card">
            <h2 class="chart-title">每日新增文档数</h2>
            <div id="docChart" class="chart-container"></div>
        </div>
    </div>

    <div class="footer">
        <div>数据来自当前服务器 SQLite 数据库</div>
        <a href="/" class="back-link">返回首页</a>
    </div>
</div>

<script>
    (function () {
        const userLabels = {{.UserDatesJSON}};
        const userCounts = {{.UserCountsJSON}};
        const docLabels = {{.DocDatesJSON}};
        const docCounts = {{.DocCountsJSON}};

        const userChartDom = document.getElementById('userChart');
        const docChartDom = document.getElementById('docChart');

        const userChart = echarts.init(userChartDom);
        const docChart = echarts.init(docChartDom);

        const commonGrid = { left: 40, right: 20, top: 30, bottom: 30 };

        const userOption = {
            tooltip: { trigger: 'axis' },
            grid: commonGrid,
            xAxis: {
                type: 'category',
                data: userLabels
            },
            yAxis: {
                type: 'value',
                minInterval: 1
            },
            series: [
                {
                    name: '新增用户数',
                    type: 'line',
                    smooth: true,
                    areaStyle: { opacity: 0.15 },
                    itemStyle: { color: '#007bff' },
                    data: userCounts
                }
            ]
        };

        const docOption = {
            tooltip: { trigger: 'axis' },
            grid: commonGrid,
            xAxis: {
                type: 'category',
                data: docLabels
            },
            yAxis: {
                type: 'value',
                minInterval: 1
            },
            series: [
                {
                    name: '新增文档数',
                    type: 'line',
                    smooth: true,
                    areaStyle: { opacity: 0.15 },
                    itemStyle: { color: '#28a745' },
                    data: docCounts
                }
            ]
        };

        userChart.setOption(userOption);
        docChart.setOption(docOption);

        window.addEventListener('resize', function () {
            userChart.resize();
            docChart.resize();
        });
    })();
</script>
</body>
</html>
